<template>
	<view class='container'>
		<view class="wrapper">
			<view class='mui-content input-content'>
				<view class='input-item'>
					<text class="tit">姓名</text>
					<input class='minput' type='text' v-model="name" placeholder='联系人姓名'></input>
				</view>
				<view class='input-item'>
					<text class="tit">手机</text>
					<input class='minput' type='number' v-model="tel" placeholder='请输入联系方式'></input>
				</view>
				<view id='showCityPicker3' class='input-item' @click="show_addr_picker=true">
					<text class="tit">地址</text>
					<input class='minput' placeholder="请选择所属区域" v-model="addr_text" disabled="ture"></input>
					<text class="iconfont icon-fanhui1"></text>
				</view>
				<view class='input-item'>
					<textarea class="xiangxi" v-model="detail" placeholder="请输入详细地址" placeholder-style="color:#999;" />
				</view>
				<view class="moren">
					<view class="uni-list">
						<view class="uni-list-cell uni-list-cell-pd">
							<view class="uni-list-cell-db">设为默认地址</view>
							<switch color="#FDD100" @change="change_default" :checked="is_default" class="kaiguan" />
							<!-- <switch color="#FDD100" checked="true" class="kaiguan" /> -->
						</view>
					</view>
				</view>
			</view>
			<button class="confirm-btn" @click="submit" :loading="loading">确认</button>
		</view>
		<w-picker :visible.sync="show_addr_picker" mode="region" :value="addr_code" default-type="value"
			:hide-area="false" @confirm="onConfirm($event)" @cancel="onCancel" ref="region"></w-picker>
	</view>
</template>

<script>
	import wPicker from '../../components/w-picker/w-picker.vue';
	import {
		saveAddrApi,
		setdefaultApi
	} from '@/api/order.js'
	export default {
		data() {
			return {
				name: '',
				tel: '',
				addr_text: '',
				addr_code: '',
				detail: '',
				is_default: false,
				addr_id: '',
				show_addr_picker: false,
				loading:false
			}
		},
		methods: {
			onConfirm(e) {
				console.log(e)
				this.addr_text = e.result;
				this.addr_code = e.value;
			},
			onCancel() {
				this.show_addr_picker = false
			},
			change_default(e) {
				this.is_default = e.target.value;
			},
			get_addr_detail() {
				let uid = this.$store.state.uid;
				let _id = this.addr_id;
				this.$http.post('/order/get_addr_detail', {
					uid,
					_id
				}).then(res => {
					console.log(res)

					uni.hideLoading()
					if (res.code == 1) {
						let data = res.data[0];
						this.name = data.name;
						this.tel = data.tel;
						this.is_default = data.is_default;
						this.addr_text = data.addr_text;
						this.addr_code = data.addr_code;
						this.detail = data.detail;
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			submit() {
				let {
					name,
					tel,
					detail,
					is_default,
					addr_text,
					addr_code,
					addr_id
				} = this;
				let uid = this.$store.state.uid;
				this.loading = true;
				this.$http.post('/order/saveAddress', {
					name,
					tel,
					detail,
					is_default,
					addr_text,
					addr_code,
					addr_id,
					uid
					}).then(res => {
					console.log(res.data)
					this.loading = false;
					if (res.data.code == 1) {
						
					}
				}).catch(err => {
					this.loading = false;
				})

			}
		},
		created() {

		}
	}
</script>


<style lang="scss">
	.uni-input-placeholder {
		color: #999
	}

	.container {
		position: relative;
		width: 100vw;
		height: 90vh;
		overflow: hidden;
		background: #f7f7f7;
	}

	.input-content {
		background: #fff;
	}


	.input-item {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: auto;
		padding: 16upx 30upx;
		background: #fff;
		border-bottom: 1px solid #f5f5f7;

		&:last-child {
			margin-bottom: 0;
		}

		.pieckerInput {
			color: #333;
			width: calc(100% - 230upx);
			font-size: 30upx;
			display: inline-block;
			line-height: 60upx;
		}

		.xiangxi {
			width: 100%;
			height: 162upx;
			padding: 14upx 10upx;
			font-size: 30upx;
		}

		.tit {
			height: 60upx;
			line-height: 60upx;
			font-size: 30upx;
			color: $font-color-dark;
			width: 200upx
		}

		.iconfont {
			color: #999;
			line-height: 60upx;
			position: absolute;
			right: 30upx;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			flex: 1;
			width: calc(100% - 50upx);
			text-align: right;
		}

		.clear_input {
			position: absolute;
			right: 0;
			top: 10upx;
			padding: 10upx;

			.iconfont {
				font-size: 40upx;
				color: $font-color-light
			}
		}
	}

	.confirm-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		border-radius: 4px;
		background: $color1;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
			border: none;
		}
	}

	.moren {
		border-top: 20upx solid #f7f7f7;
		padding: 0 30upx;
		height: 110upx;
		line-height: 90upx;
		overflow: hidden;
		font-size: 30upx;

		.uni-list-cell-db {
			float: left;
			color: #333;
		}

		.kaiguan {
			float: right;
		}
	}

	.allinfo {
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.xzdz .box01 {
		width: 94%;
		height: 45px;
		border-bottom: 1px solid #f7f7f7;
		margin-left: 3%;
	}

	.xzdz .box01 input {
		width: 72%;
		height: 45px;
		float: right;
	}

	.xzdz .box01 text {
		width: 70px;
		line-height: 45px;

	}


	.xzdz .box01.mr .iconfont {
		line-height: 42px;
		font-size: 18px;
		vertical-align: middle;
	}

	.xzdz .box01.gouxuan .iconfont:before {
		color: #4499ee;
		content: "\e61e";
	}

	.allinfo .btn {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background: #4499ee;
		border-radius: 0;
		position: fixed;
		bottom: 0;
		color: #fff;
		font-size: 16px;
	}

	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	uni-switch .wx-switch-input:not([class*="bg-"]),
	uni-switch .uni-switch-input:not([class*="bg-"]) {}
</style>
